<template>
  <div>
    <el-table
    :data="dateList"
    style="width: 100%">
    <el-table-column
     align="center"
      prop="number"
      label="考试编号"
     >
    </el-table-column>
    <el-table-column
     align="center"
      prop="subject"
      label="学科"
      >
    </el-table-column>
    <el-table-column
    align="center"
      prop="catalog"
      label="目录"
     >
    </el-table-column>
    <el-table-column
    align="center"
      prop="questionType"
      label="题型"
     >
     <template #default="scope">
      {{filterQuestions(scope.row.questionType)}}
      <!-- {{scope.row.questionType}} -->
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="question"
      label="题干"
      width="350"
      >
      <template #default="scope">
      {{delHtmlTag(scope.row.question)}}
      </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间" width="200px">
    <template #default="scope">
    {{parseTimeByString(scope.row.addDate)}}
    </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="difficulty"
      label="难度"
     >
     <template #default="scope">
    {{filterDifficulty(scope.row.difficulty)}}
   </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="creator"
      label="录入人"
     >
    </el-table-column>
    <el-table-column
    align="center"
      prop="chkState"
      label="审核状态"
     >
     <template #default="scope">
      {{filterAudit(scope.row.chkState)}}
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="chkRemarks"
      label="审核意见"
     >
    </el-table-column>
    <el-table-column
    align="center"
      prop="chkUser"
      label="审核人"
     >
    </el-table-column>
    <el-table-column
    align="center"
      prop="publishState"
      label="发布状态"
     >
     <template #default="scope">
      {{filterAudit(scope.row.publishState)}}
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      align="center"
      label="操作"
      width="300">
      <template #default="scope">
        <el-button  type="text" size="mini" @click="onPreview(scope.row)">预览</el-button>
        <el-button type="text" size="mini" :disabled="scope.row.chkState+0" @click="openAudit(scope.row.id)">审核</el-button>
        <el-button type="text" size="mini" :disabled="scope.row.publishState"  @click="$router.push({path:'new',query:{id:scope.row.id}})" >修改</el-button>
        <el-button type="text" size="mini" @click="shelves(scope.row.id,scope.row.publishState)" v-if="!scope.row.publishState"  >上架</el-button>
        <el-button type="text" size="mini" @click="shelves(scope.row.id,scope.row.publishState)" v-else >下架</el-button>
        <el-button type="text" size="mini" @click="onDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 预览组件 -->
  <!-- <QuestionsPreview></QuestionsPreview> -->
<QuestionsPreview v-if="showPreviewDialog"
:showPreviewDialog="showPreviewDialog" @close="showPreviewDialog=false" :previewList="previewList">
</QuestionsPreview>
    <!-- 审核组件 -->
    <questionAudit ref="refAudit" :getDateList="getDateList" ></questionAudit>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入预览组件
import QuestionsPreview from '../components/questions-preview.vue'
// 引入审核组件
import questionAudit from '../components/question-audit.vue'
// 过滤时间
import { parseTimeByString, delHtmlTag, filterQuestions, filterDifficulty, filterAudit, publishType } from '@/filters/index.js'
// 上下架
import { choicePublish, detail, remove } from '@/api/hmmm/questions.js'
import { ref } from 'vue'

export default {
  name: '',
  components: { QuestionsPreview, questionAudit },

  props: {
    dateList: {
      type: Array,
      default: () => []
    },
    getDateList: {
      type: Function,
      default: null
    }
  },
  setup (props) {
    // ----- 预览按钮--------
    // 预览请求
    const showPreviewDialog = ref(false)
    async function onPreview (data) {
      getDtailList(data)
    }
    // 删除功能
    function onDel (id) {
      // 代码片段epmecon
      ElMessageBox.confirm('此操作将永久删除该题目,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id: id }).then(() => {
          console.log(id)
          ElMessage.success('删除成功！')
          // getList()
          props.getDateList()
        })
      })
    }
    const previewList = ref({})
    async function getDtailList (id) {
      const { data } = await detail(id)
      console.log(data)
      previewList.value = data
      showPreviewDialog.value = true
    }
    return {
      parseTimeByString,
      delHtmlTag,
      filterQuestions,
      filterDifficulty,
      filterAudit,
      publishType,
      getDtailList,
      onPreview,
      showPreviewDialog,
      previewList,
      onDel
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 显示审核框
    openAudit (id) {
      this.$refs.refAudit.dialogVisible = true
      this.$refs.refAudit.id = id
      console.log(id)
    },
    // 题库上下架
    shelves (id, publishState) {
      publishState = publishState === 0 ? 1 : 0
      choicePublish({ id, publishState })
      this.getDateList()
    }
  }
}
</script>

<style scoped>

</style>
